@import "normalize";
@import "base";
@import "variable";

// 字体大小设置
.font_dpr(@font-size: 16px) {
  font-size: @font-size;

  [data-dpr= "2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr= "3"] & {
    font-size: @font-size * 3;
  }
}
.main {
  .product-nav {
    height: 77rem/@base;
    border-top: 2rem/@base solid #eaeaea;
    border-bottom: 2rem/@base solid #eaeaea;
    background-color: #5a5a5a ;
    padding-left: 24rem/@base;
    padding-right: 15rem/@base;

    a {
      float: left;
      height: 100%;
      line-height: 77rem/@base;
      .font_dpr(16px);
      color: #fff;
    }
    button {
      float: right;
      width: 120rem/@base;
      height: 52rem/@base;
      border: 2rem/@base solid #b0b0b0;
      background-color: #e6e6e6;
      border-radius: 5rem/@base;
      margin-top: 12rem/@base;
      color: #5a5a5a;
    }
  }
  .product {
      .img-box {
        padding: 20rem/@base;
        img {
          width: 300rem/@base;
          height: 200rem@base;
          margin: 0 auto;
        }
    }
    .title {
      padding: 0 20rem/@base;
      line-height: 40rem/@base;
      .font_dpr(16px);
      color: #575757;
    }
    .product-tab {
      border-top: 2rem/@base solid #ccc;
      border-bottom: 2rem/@base solid #ccc;
    }
    .product-tab li {
      float: left;
      width: 33.33%;
      a {
        display: block;
        height: 60rem/@base;
        line-height: 60rem/@base;
        text-align: center;
        background-color: #fb0;
        color: #fff;
      }
      &.current a {
        background-color: #ff9000;
      }
      &:nth-child(2) a {
        border-left: 2rem/@base solid #ccc;
        border-right: 2rem/@base solid #ccc
      }
    }
    table td {
      height: 30rem/@base;
      padding-top: 20rem/@base;
      img {
        width: 20rem/@base;
        height: 20rem/@base;
        margin-left: 20rem/@base ;
      }
    }
  }
  .comment {
    .font_dpr(16px);
    .title {
      border-top: 5rem/@base solid #eee;
      background-color: #dbdbdb;
      height: 70rem/@base;
      line-height: 70rem/@base;
      text-align: center;
      font-weight: 700;
    }
    .content  {
      padding: 20rem/@base 40rem/@base;
      p {
        line-height: 40rem/@base;
        &.clearfix {
          color: #666;
          .font_dpr(14px);
        }
      }
      .para {
        border-bottom: 2rem/@base solid #ccc;
        padding-bottom: 20rem/@base;
      }
    }
  }
  .get-more {
    height: 85rem/@base;
    padding: 0 20rem/@base;
    a {
      display: block;
      margin: 0 auto;
      text-align: center;
      width: 100%;
      height: 63rem/@base;
      line-height: 63rem/@base;
      background-color: #f9f9f9;
      border: 1rem/@base solid #e7e7e7;
      border-radius: 5rem/@base;
      text-decoration: none;
      margin-top: 20rem/@base;
      .font_dpr(16px);
    }
  }
}